import React, { memo, useCallback, useMemo, useState } from 'react';
import ReactDOM from 'react-dom';
/* 
 useMemo 可以用来缓存一些空间地址
 let xxx = useMemo(()=>{return {xxx:xxx}},[依赖])
 每次当函数组件重新执行的时候  useMemo对应的回调函数会根据依赖是否发生改变
 来决定 是都重新给xxx赋予一个新的地址

 let xxx = useCallback(某个函数,[依赖])
  他是用来缓存函数体的地址的

  useMemo是用来缓存对象的
  useCallback是用来缓存函数的

  memo+useMemo+useCallback 三者结合是一个优化手段
*/

function Child1(props) {
  console.log('---------child1 render')
  return <h1>姓名式：{props.t.name}</h1>
}
function Child2(props) {
  console.log('child2 render')
  return <h1>年龄式：{props.t}</h1>
}
function Child3() {
  console.log('.....child3 render')
  return <h2>child3</h2>
}
Child3 = memo(Child3) // memo可以用来缓存函数组件

Child1 = memo(Child1) // memo 的功能类似于 类组件的shouldComponentUpdate钩子函数
Child2 = memo(Child2)

function App() {
  let [name, setName] = useState("珠峰")
  let [age, setAge] = useState(13)
  // let obj = { name }
  let obj = useMemo(() => {
    // 可以避免每次 重新创建一个空间地址
    // 只要他的依赖不发生改变 那么 对应空间地址就是一个老地址
    console.log('memo的回调执行了')
    return {
      name
    }
  }, [name])

  function f() {
    console.log(888)
  }
  console.log(obj)
  f = useCallback(f, [])
  return <>
    <button onClick={() => setAge(age + 1)}>+</button>
    <button onClick={() => setName(name + '6')}>name</button>
    <Child1 t={obj} onF={f} />
    <Child2 t={age} />
    <Child3 />
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))